<!--
 * @name: 
 * @version: 1.1.1
 * @Author: 刘大可
 * @Date: 2022-04-12 10:48:28
 * @LastEditors: 刘大可
 * @LastEditTime: 2022-04-14 20:41:50
-->
<template>
    <view class="">
		<!-- 自定义导航栏 -->
		<z-nav-bar v-if="!isWxBrowser" transparentFixedFontColor="#000" :scrollTop="scrollTop" type="transparentFixed" backState="2000" title="直播列表"></z-nav-bar>
		<public-module></public-module>
		<view class="h-bg" :style="'background-image: url('+headBgImg+');'">
			
		</view>
		<view class="live-banner">
			<image :src="imgUrl + '/static/web/img/live-banner.png'" mode=""></image>
		</view>
		<view class="rooms">
			<block v-for="(item,index) in rooms" :key="index">
			    <view class="room-item" style="padding: 16rpx 24rpx;"  @click="go(item.roomid)" :style="'background-image:url(' + item.feeds_img + ');'" v-if="item.live_status == 101">
			        <view class="item-header">
			        	<view class="live-name">
			        		{{ item.anchor_name }}
			        	</view>
						<view class="live-status" v-if="item.live_status == 101">
							直播中
						</view>
			        </view>
					<view class="live-user-name">
						{{ item.name }}
					</view>
			    </view>
				
				<view class="room-item" :style="'background-image:url(' + item.feeds_img + ');'" v-else>
				    <view style="display: flex;flex-direction: column;background-color: rgba(0, 0, 0, .5);justify-content: center;align-items: center;width: 100%;height: 100%;padding: 16rpx 24rpx;border-radius: 24rpx;">
				    	<view style="font-size: 32rpx;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #FFFFFF;line-height: 45rpx;">
				    		直播已结束
				    	</view>
				    	<view class="live-user-name">
				    		{{ item.anchor_name }}
				    	</view>
				    </view>
				</view>
			</block>
		</view>
        <tab-bar :current="2"></tab-bar>
    </view>
</template>
<script>
export default {
    data() {
        return {
            rooms:[],
			headBgImg: this.$http.baseUrl + 'static/web/img/apply-bg.png', // 顶部背景图片
			scrollTop: 0, // 顶部导航栏类型
			imgUrl: this.$http.baseUrl, // 服务器域名
        }
    },
    onShow() {
        // this.initData()
		// 检测授权
		this.judgeLogin(()=>{
			var userInfo = this.$store.state.userInfo;
			this.getLiveLists()
		});
    },
	// 监听滑动事件
	onPageScroll(e) {
		this.scrollTop = e.scrollTop
	},
    methods: {
		// 获取直播间
		getLiveLists(){
			this.$http.get('api/ZhLiveBroadcast/getLiveLists').then(res=> {
				console.log(res)
				this.rooms = res.room_info
			})
		},
        go(roomid){
            let roomId = [roomid] // 填写具体的房间号，可通过下面【获取直播房间列表】 API 获取
            let customParams = encodeURIComponent(JSON.stringify({ path: 'pages/index/index', pid: 1 })) // 开发者在直播间页面路径上携带自定义参数（如示例中的path和pid参数），后续可以在分享卡片链接和跳转至商详页时获取，详见【获取自定义参数】、【直播间到商详页面携带参数】章节（上限600个字符，超过部分会被截断）
            wx.navigateTo({
                url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${roomId}&custom_params=${customParams}`
            })
        }
    },
}
</script>
<style>
	page {
		background-color: #f1f1f1;
	}
</style>
<style lang="scss" scoped>
	.h-bg {
		width: 100%;
		padding: 140rpx 0 65rpx;
		.box-item {
			margin: 0 30rpx 30rpx;
		}
	}
	.live-banner {
		width: 100%;
		height: 250rpx;
		padding: 0 30rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.live-status {
		width: 102rpx;
		height: 40rpx;
		background: linear-gradient(90deg, #CD6EFF 0%, #7F5AFF 65%, #5A5AFF 100%);
		border-radius: 4rpx 24rpx 4rpx 24rpx;
		line-height: 40rpx;
		text-align: center;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 33rpx;
	}
	.rooms {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 30rpx 30rpx 50rpx;
		// #ifdef MP-WEIXIN
		padding: 30rpx 30rpx 300rpx;
		// #endif
		.room-item {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			width: 334rpx;
			height: 320rpx;
			border-radius: 24rpx;
			// padding: 16rpx 24rpx;
			// background: rgba(0, 0, 0, .2);
			margin-bottom: 25rpx;
			background-size: 100% 100%;
			.item-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				.live-name {
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 40rpx;
				}
			}
			.live-user-name {
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 40rpx;
			}
			
		}
	}
</style>